<template>
	<view class="order">
		<scroll-view scroll-y="true" style="height:70vh; border-bottom:4rpx solid #efefef;">
			<view class="content">
				<view class="head">
					<image src="https://carching.cd1a.cn/images/mini_program/battery.png">
						<text class="title">充电结束</text>
					</image>
				</view>
				<view class="card-base">
					<view class="base">
						<view class="base-content">
							<text>{{data.time}}</text>
							<!-- <view>至</view>
							<text>{{item.end_time}}</text> -->
						</view>
						<text class="power"><text>用电量:</text>{{data.total_energy}}<text>度</text></text>
					</view>
					<view class="base-coast">
						<view>
							<text>电费</text>
							<text class="coin">{{data.unit_price}}<text>元/度</text></text>
						</view>
						<text class="dollor"><text>￥</text>{{data.cost_unit_price}}</text>
					</view>
					<view class="base-money">
						<view>
							<text>服务费</text>
							<text class="yuan">{{data.service_price}}<text>元/度</text></text>
						</view>
						<text class="dollor"><text>￥</text>{{data.cost_service_price}}</text>
					</view>
				</view>
				<!-- <view class="discount" v-if="data.cardCount">
					<text>优惠</text>
					<view class="close-right">
						<text v-if="id"><text>&#40<text>已使用{{id}}元</text>&#41</text></text>
						<text v-else>(您有优惠卷待使用)</text>
						<view class="close" @click="use">去使用</view>
					</view>
				</view>
				<view class="discount" v-else>
					<text>优惠</text>
					<view class="close-right">
						<text>(您暂无优惠卷使用)</text>
					</view>
				</view> -->
				<view class="discount">
					<text>实际支付</text>
					<text class="money"><text>￥</text>{{data.money}}</text>
				</view>
			</view>
		</scroll-view>
		<button @click="confirm" :disabled="status ? true : false">确认支付</button>
	</view>
</template>

<script>
	import paths from "../../config/path.js"
	import {
		post
	} from "../../api/index.js"
	export default {
		data() {
			return {
				data: "",
				id: "",
				logId: "",
				cardId: "",
				log_id: "",
				status: false
			}
		},
		methods: {
			use() {
				uni.navigateTo({
					url: "../coupon/index?id=" + this.data.server_sum_money
				})
			},
			confirm() {
				let that = this
				let url = paths.payMent
				let codeNum = uni.getStorageSync("codeNum")
				let userData = uni.getStorageSync("userInfo")
				that.status = true
				if(this.id) {
					post(url, {
						code_num: codeNum,
						log_id: this.logId ? this.logId : this.log_id, // 如果订单有则正常获取，没有则从缓存中获取
						card_id: this.cardId,
						userid_locked: userData.userid_locked
					}).then(res => {
						console.log(res)
						uni.showLoading({
							title: "支付中...",
							success: function() {
								switch(res.data.code) {
									case "2":
									uni.showToast({
										title: "支付成功",
										success: function() {
											uni.reLaunch({
												url: "../index/index"
											})
										}
									})
									break
									case "5":
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									})
									break
								}
							}
						})
					})
				} else {
					post(url, {
						code_num: codeNum,
						log_id: this.logId ? this.logId : this.log_id,
						userid_locked: userData.userid_locked
					}).then(res => {
						console.log(res)
						uni.showLoading({
							title: "支付中...",
							success: function() {
								switch (res.data.code) {
									case "2":
									uni.showToast({
										title: "支付成功",
										success: function() {
											uni.reLaunch({
												url: "../index/index"
											})
										}
									})
									break
									case "5":
									that.status = false
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									})
									break
								}
							}
						})
					})
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.cardId = option.name
			this.logId = uni.getStorageSync("logId")
			if(option.log_id) {
				this.log_id = option.log_id
			} 
			if (!option.id) {
				let url = paths.order
				post(url, {
					log_id: this.logId ? this.logId : this.log_id
				}).then(res => {
					console.log(res)
					this.data = res.data.data
					uni.setStorageSync("list", res.data.data)
				})
			} else {
				this.data = uni.getStorageSync("list")
				console.log(this.data)
			}
		},
		// computed: {
		// 	calMoney() {
		// 		if (this.id) {
		// 			let sum = Number(this.data.power_sum_money) + (Number(this.data.server_sum_money) - Number(this.id))
		// 			return sum.toFixed(2) == NaN ? 0 : sum.toFixed(2)
		// 		} else {
		// 			let sum = Number(this.data.power_sum_money) + Number(this.data.server_sum_money)
		// 			return sum.toFixed(2) == NaN ? 0 : sum.toFixed(2)
		// 		}
		// 	}
		// }
	}
</script>

<style scoped>
	.content {
		padding: 40rpx 40rpx;
	}

	.head {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	image {
		width: 30rpx;
		height: 52rpx;
	}

	.title {
		font-size: 52rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.card-base {
		border-top: .5px solid #707070;
		margin: 5rpx auto;
	}

	.base {
		color: #999999;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.discount {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: .5px solid #707070;
		padding: 10rpx 0;
		height: 80rpx;
	}

	.base-coast,
	.base-money {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.money {
		color: #0DA297;
		font-weight: bold;
	}

	.base-content>text {
		margin-right: 12rpx;
	}

	.power {
		color: #999999;
		letter-spacing: 1px;
		font-size: 25rpx;
	}

	.coin {
		font-size: 25rpx;
		color: #999999;
		margin-left: 55rpx;
	}

	.yuan {
		font-size: 25rpx;
		color: #999999;
		margin-left: 25rpx;
	}

	.dollor {
		font-weight: bold;
	}

	.close-right {
		text-align: -webkit-right;
		display: flex;
	}

	.close-right>text {
		color: #999999;
		font-size: 25rpx;
	}

	.close {
		width: 110rpx;
		height: 30rpx;
		border: 1px solid #ff4891;
		border-radius: 7rpx;
		color: #ff4891;
		font-size: 20rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	button:active,
	.close:active {
		background-color: #cfcfcf;
	}

	button {
		border-radius: 999px;
		color: #FFFFFF;
		letter-spacing: 1px;
		background-color: #0DA297;
		width: 90%;
		margin-top: 110rpx;
	}
</style>
